<script lang="ts" setup>
import Item from './components/Item.vue'
import { calculateUnit } from '@/utils/io'
import { delayNavigateTo } from '@/utils/navigator'

const { logout } = useUser()
const { success } = useToast()

// 退出登录
async function onLogout() {
  uni.showModal({
    content: '确定要退出账号吗？',
    success: ({ confirm }) => {
      if (confirm) {
        logout()
        success('退出成功')
        delayNavigateTo('/pages/index/index')
      }
    }
  })
}

/**
 * 清理缓存逻辑
 */
// #ifdef APP-PLUS
// @ts-expect-error ofc, this is uniapp type
// H5+清理和计算缓存逻辑
const cache = plus.cache as {
  clear: (cb: () => void) => void
  calculate: (cb: (size: number) => void) => void
}

// 定义缓存大小变量
let fileSizeString = ref('')

// 计算缓存大小
function getCacheSize() {
  cache.calculate(size => fileSizeString.value = calculateUnit(size))
}
getCacheSize()

// 清除缓存，并重新获取缓存大小
function clearCache() {
  cache.clear(() => success('缓存清理成功！'))
  getCacheSize()
}
// #endif

</script>

<template>
  <view overflow-hidden>
    <view class="list">
      <navigator url="/pages/mine/pages/userinfo" open-type="navigate">
        <Item title="个人信息" />
      </navigator>
      <navigator url="/pages/forget/index?type=forget" open-type="navigate">
        <Item title="修改密码" is-end />
      </navigator>
    </view>
    <view class="list">
      <!-- #ifdef APP-PLUS -->
      <Item title="清理缓存" @click="clearCache">
        <template #extra>
          {{ fileSizeString }}
        </template>
      </Item>
      <!-- #endif -->
      <Item title="关于我们" is-end />
    </view>

    <view @click="onLogout">
      <button class="setting_button" plain hover-class="setting_button_hover">
        退出登录
      </button>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.setting_button {
  margin: 0;
  padding: 0;
  width: 100%;
  padding: 5rpx 0;
  color: #f38e48;
  font-size: 30rpx;
  margin-top: 40rpx;
  border: none !important;
  box-shadow: 0 0 20rpx 0 rgba(215, 215, 215, 0.35);

  &_hover {
    color: white;
    background-color: #f38e48;
  }
}

.list {
  width: 100%;
  color: #333333;
  margin-top: 30rpx;
  background-color: white;
  box-shadow: 0 0 20rpx 0 rgba(215, 215, 215, 0.35);
}
</style>

